import React, {Component} from 'react';

class App extends Component {
    state = {
        value: '',
        list: [{
            id: 1, name: "张三", isChecked: true
        }, {
            id: 2, name: "李四", isChecked: false
        }]
    }

    add = () => {
        if (this.state.value === '') {
            return;
        }
        const newState = [...this.state.list];
        newState.push({id: Date.now(), name: this.state.value, isChecked: false});
        this.setState({value: '', list: newState});
    }

    del(index) {
        const newState = [...this.state.list];
        newState.splice(index, 1);
        this.setState({list: newState});
    }

    updateChecked(index) {
        const newList = [...this.state.list];
        newList[index].isChecked = !newList[index].isChecked;
        this.setState({list: newList});
    }

    render() {
        return (<div>
            <input value={this.state.value} onChange={e =>
                this.setState({value: e.target.value})}/>
            <button onClick={this.add}>添加</button>
            <ul>
                {this.state.list.map((item, index) =>
                    <li key={item.id}>
                        <input type="checkbox" checked={item.isChecked} onChange={() => this.updateChecked(index)}/>
                        <span dangerouslySetInnerHTML={{__html: item.name}}
                              style={{textDecoration: item.isChecked ? 'line-through' : null}}></span>
                        <button onClick={() => this.del(index)}>删除</button>
                    </li>
                )}
            </ul>
            {this.state.list.length === 0 ? <div>暂无数据</div> : null}
        </div>);
    }
}

export default App;